<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
    <script src="/admin/js/token.js"></script>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div style="text-align: center;">
                <div class="layui-inline">
                    <input class="layui-input" name="id" id="test-table-demoReload" placeholder="输入角色名称" autocomplete="off">
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin search" lay-submit lay-filter="LAY-user-back-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                    </button>
                </div>
            </div>
        </div>



        <div class="layui-card-body">
            <button class="layui-btn layui-btn-sm layui-icon layui-icon-add-circle" id="add">新增角色</button>
            <table class="layui-hide" id="t" lay-filter="t"></table>

        </div>

    </div>
</div>



</body>

<script type="text/html" id="tb">
    <div class="layui-container">
        <span class="">角色管理</span>
    </div>
</script>

<script type="text/html" id="caozuo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">权限编辑</a>
</script>

<script>

        var $ = layui.$
        var table = layui.table
        var table_obj = table.render({
            elem: '#t',
            id: 'tt',
            toolbar: '#tb',
            url: 'http://localhost:8080/admin/role/findRoleWithPage',
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            },

            cols: [
                [{
                    field: 'roleId',
                    title: '编号',
                    width: '20%',
                    align: 'center'
                },
                    {
                        field: 'roleName',
                        title: '角色名称',
                        width: '60%',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        width: '20%',
                        align: 'center',
                        toolbar: '#caozuo',
                        fixed: 'right'
                    }
                ]
            ],
            page: true
        })

        //监听工具条
        table.on('tool(t)', function (obj) {
            var data = obj.data
            if (obj.event === 'detail') {
                layer.open({
                    type: 2,
                    area:["100%", "100%"],
                    content: 'roleTree.html?roleId='+data.roleId //这里content是一个普通的String
                });
            }
        })
        $("#add").on("click",function () {
            layer.open({
                type: 2,
                area:["100%", "100%"],
                content: 'InsertroleTree.html' //这里content是一个普通的String
            });
        })

        $('.test-table-operate-btn .layui-btn').on('click', function () {
            var type = $(this).data('type')
            active[type] ? active[type].call(this) : ''
        })
        $('.search').on('click',function () {
            var text = $('#test-table-demoReload').val();
            table.reload('tt',{
                url:'http://localhost:8080/admin/role/findRoleWithPage',
                where:{
                    roleName:text
                },
                page:{
                    curr:1
                }
            })
        })
</script>
</html>
